<script lang="ts" setup>
import { useVModel } from "@/utils/useVModel";
const props = defineProps({
	modelValue: {
		type: Object,
		required: true,
	},
});
const emit = defineEmits(["update:modelValue"]);

const model = useVModel(props, "modelValue", emit);

const formRef = ref();
const instance = getCurrentInstance();
onMounted(() => {
	if (instance && instance.exposed) {
		const entries = Object.entries(formRef.value.$.exposed);

		for (const [key, value] of entries) {
			instance.exposed[key] = value;
		}
	}
});

defineExpose(instance && instance.exposed ? { ...instance.exposed } : {});
const rules = ref({
	name: [{ required: true, message: "请输入就诊人姓名", trigger: "change" }],
	idcard: [{ required: true, message: "请输入身份证号码", trigger: "change" }],
});
</script>

<template>
	<el-form :model="model" :rules="rules" label-width="auto" ref="formRef">
		<el-form-item label="就诊人姓名：" prop="name">
			<el-input v-model="model.name" placeholder="请输入就诊人姓名" />
		</el-form-item>

		<el-form-item label="身份证号码：" prop="idcard">
			<el-input v-model="model.idcard" placeholder="请输入身份证号码" />
		</el-form-item>

		<el-form-item label="备注：" prop="remark">
			<el-input v-model="model.remark" type="textarea" placeholder="请输入" />
		</el-form-item>
	</el-form>
</template>
<style lang="scss" scoped>
:deep(.avatar-uploader) {
	.el-upload {
		position: relative;
		overflow: hidden;
		cursor: pointer;
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		transition: var(--el-transition-duration-fast);
	}
	.obscuration {
		position: absolute;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100px;
		height: 100px;
		padding: 20px;
		background: rgb(0 0 0 / 20%);
	}
	.el-upload:hover {
		border-color: var(--el-color-primary);
	}
	img {
		width: 100px;
		height: 100px;
	}
	.el-icon.avatar-uploader-icon {
		width: 100px;
		height: 100px;
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}
}
</style>
